<template>
  <div class="detail">
    <div class="container">
      <div class="title">
        <p>添加包邮优惠活动</p>
        <i class="iconfont icon-cha"></i>
      </div>
      <div class="form">
        <form>
          <fieldset>
            <p>
              <label for="title">名称*</label>
              <input type="text" id="title" name="title" align="left" />
            </p>
            <p>
              <label for="file">活动图片（1900*700）</label>
              <input type="file" name="file" id="file" />
            </p>
            <p>
              <label for="start">开始时间*</label>
              <input type="text" id="start" name="start" placeholder="活动开始时间" />
            </p>
            <p>
              <label for="end">截止时间*</label>
              <input type="text" id="end" name="end" placeholder="活动结束时间" />
            </p>
            <p>
              <label for="end">产品适用范围</label>
              <select name="range" id="renge">
                <br />
                <option value="all">全订单</option>
                <option value="item1">item1</option>
                <option value="item2">item2</option>
                <option value="item3">item3</option>
              </select>
            </p>
            <p>
              <label for="money">包邮金额*</label>
              <input type="text" id="money" name="money" placeholder="请输入包邮金额" />
            </p>
            <p>
              <label for="messageContent">活动说明</label>
              <textarea id="messageContent" name="messageContent" cols="40" rows="2" align="left"></textarea>
            </p>
            <p>
              <input type="submit" value="提交" class="btn" />
              <input type="button" value="取消" class="btn" />
            </p>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "detail"
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.detail {
  background: rgba(0, 0, 0, .3);
  height: 100vh;
}
.container {
  background: white;
  width: 55%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-bottom: 30px;
}
.title {
  display: flex;
  justify-content: space-between;
  background: #f1f2f6;
}
.title p {
  margin-left: 10px;
  margin-top: 10px;
}
.title i {
  display: block;
  margin-top: 10px;
  margin-right: 10px;
}
label { 
    float: left; 
    width: 10em; 
    margin-left: 3em; 
    text-align: left; 

    }
input{
    width: 20em;
}
select{
    width: 20em ;
}
p{
    margin: 30px auto;
}
.btn{
    background: #dfe4ea;
    width: 60px;
    height: 40px;
    margin: 20px;
}
</style>

